<template>
  <div class="main_chart">
    <div style="overflow: hidden">
      <div style="float: left">
        <el-select
            v-model="selectName"
            placeholder="选择模型名称"
            size="large"
            style="width: 240px"
            @change="getChartData()"
            clearable
        >
          <el-option
              v-for="(item,index) in name"
              :key="index"
              :label="item"
              :value="index"
          />
        </el-select>
      </div>
      <div style="float: right">
        <span style="font-size: 14px;color: #606266;margin-right: 10px">最近一</span>
        <el-button @click="changeDate(365)">年</el-button>
        <el-button @click="changeDate(30)">月</el-button>
        <el-button @click="changeDate(7)">周</el-button>
        <el-button @click="changeDate(1)">天</el-button>
      </div>
    </div>
    <div ref="chartDom" style="width: 100%;height: 400px;"></div>
  </div>
</template>
<script setup>
import {ref, onMounted} from 'vue';
import * as echarts from 'echarts';
import {getChartDataApi, getModelNameChartApi} from "@/api/model.js";

// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
let chartInstance = null;
//下拉框
const name = ref();
//下拉选中框
const selectName = ref(null);
//选择时间区间
let timeArea = ref(7);
//横坐标条件
let oneWeekAgo = new Date().getTime() - timeArea.value * 24 * 60 * 60 * 1000;
const now = new Date().getTime();

const chartData = ref()
onMounted(() => {
  initData();
  chartInstance = echarts.init(chartDom.value);
  // 配置图表
  const option = {
    xAxis: {
      type: 'time',
      min: oneWeekAgo,
      max: now,
      axisLabel: {
        formatter: function (value) {
          const date = new Date(value);
          const month = String(date.getMonth()+1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          const hour = String(date.getHours()).padStart(2, '0');
          if (timeArea.value == 1) {
            return `${hour}:00`;
          }
          return `${month}-${day}`;
        }
      },
    },
    tooltip: {
      trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
      axisPointer: {// 坐标轴指示器，坐标轴触发有效
        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [[]],
      type: 'line',
      smooth:true
    }]
  };
// 使用配置项和数据显示图表
  chartInstance.setOption(option);
})
;

function initData() {
  getName()
}

function getName() {
  if(localStorage.getItem('token')==null){
    return
  }
  getModelNameChartApi().then(res => {
    name.value = res.data
  })
}

function changeDate(num) {
  timeArea.value = num;
  oneWeekAgo = new Date().getTime() - num * 24 * 60 * 60 * 1000;
  chartInstance.setOption({
    xAxis: {
      min: oneWeekAgo
    }
  });
}

function getChartData() {
  if(selectName.value==undefined){
    chartData.value = null
    chartInstance.setOption({
      series: [{
        data: [],
      }]
    })
    return
  }
  getChartDataApi(selectName.value).then(res => {
    chartData.value = res.data
    chartInstance.setOption({
      series: [{
        data: chartData.value,
        type: 'line'
      }]
    })
  })
}
</script>
<style scoped>

</style>